<!doctype html>
<html lang="en">
<head>
    @include('web.layout.head')
    <link rel="stylesheet" href="{{asset('/css/web/user/order_list.css')}}">
    <link rel="stylesheet" href="{{asset('/css/web/user/repair.css')}}">
    <link rel="stylesheet" href="{{asset('/css/web/user/common.css')}}">
    <link rel="stylesheet" href="{{asset('/js/web/frame/imgUp/css/imgup.css')}}">
</head>
<body>
@include('web.layout.header')
@include('web.layout.user_tab')
<div class="base_member_content">
    <div class="w1200">
        @include('web.layout.buyer_nav')
        <div class="nav_right flr">
            <div class="base_content">
                <div class="line_title" style="border-bottom:1px dashed #e6e6e6;margin-bottom: 0;">申请退货</div>
                <div class="back_center">
                    <div class="back_left">
                        <form method="post" id="postForm"  enctype ="multipart/form-data">
                            {{csrf_field()}}
                            <input type="hidden" name="user_id" id="user_id" value="{{$user_id}}">
                            <input type="hidden" name="user_name" id="user_name" value="huanhuan">
                            <input type="hidden" name="shop_id" id="shop_id" value="{{$shop_id}}">
                            <input type="hidden" name="change_type"  id="change_type" value="{{ $order_status==2 ? 0:2 }}">
                            <input type="hidden" name="order_code" id="order_code"  value="{{$order_code}}">
                            <input type="hidden" name="order_id"  id="order_id" value="{{$id}}">
                            <input type="hidden" name="change_product"  id="change_product" value="{{ $change_product}}">
                            <input type="hidden" name="num" id="num"  value="{{count($order_products)}}">
                            <div class="left_type">
                                <p class="back_type">类型：</p>
                                <span class="back_refund">{{ $order_status<=2 ? '退款':'退款退货' }}</span>

                            </div>
                            <div class="left_type">
                                <p class="back_type must">退款原因:</p>
                                <select class="back_choise" name="resason" id="resason">
                                  <option value ="">请选择退货理由</option>
                                  <option value ="我不想要了">我不想要了</option>
                                  <option value="商品描述与实际不符">商品描述与实际不符</option>
                                  <option value="商品无法使用">商品无法使用</option>
                                  <option value="商品无法安装">商品无法安装</option>
                                </select>
                            </div>
                            <div class="left_type">
                                <p class="back_type must">退款金额：</p>
                                ￥ {{$product_money}}
                                <input class="back_money" type="hidden" value="{{$product_money}}"  id="change_money" name="change_money">
                                {{--<span class="back_postage">最多￥<i>{{$product_money}}</i>,含发货邮费<i>0.00</i></span>--}}
                            </div>
                            <div class="left_type">
                                <p class="back_type">退款说明：</p>
                                <textarea class="back_explain" name="explain" id="explain" placeholder="退款说明" maxlength="200"></textarea>
                                <div class="words" id="enterLetter">还<span>200</span>字</div>
                            </div>
                         <div class="left_type" style="margin-top: 86px;">
                            <p class="back_type">上传图片：</p>
                              <!--图片选择对话框-->
                            <div id="div_imgfile"></div>
                               <!--图片预览容器-->
                            <div id="div_imglook">
                                <div style="clear: both;"></div>
                            </div>
                             <input id="tp_ico1" type="hidden" name="images[]" value=""/>
                             <input id="tp_ico2" type="hidden" name="images[]" value=""/>
                             <input id="tp_ico3" type="hidden" name="images[]" value=""/>
                            <!--确定上传按钮-->
                            {{--<input type="button" value="确定上传" id="btn_ImgUpStart" />--}}
                            <p class="three">上传凭证（最多三张）</p>
                        </div>
                        <div class="tijiao">
                           <button type="button" class="btn">提交</button>
                        </div>
                    </form>

                    </div>
                    <div class="back_right">
                           <div class="right_top">
                              <h5 class="right_order">订单详情</h5>
                              <p class="right_seller">卖&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家：<span>{{$shop['company_name']}}</span></p>
                              <p class="right_seller">订单编号：<span>{{$order_code}}</span></p>
                              <p class="right_seller">订单总额：<span style="color: #ff7a00;">￥{{$product_money}}</span></p>
                           </div>
                           <div class="right_bottom">
                               @if(count($order_products)>0)
                               @foreach($order_products as $product)
                              <div class="bottom_store">
                                  <div class="store_img"><img src="" alt=""></div>
                                  <p class="store_price">单价：<span>￥{{$product['product_price']}}*{{$product['quantity']}}<i>(数量)</i></span></p>
                                  <p class="store_total">商品总价：<span>￥{{$product['product_money']}}</span></p>
                              </div>
                               @endforeach
                               @endif
                           </div>
                           <a class="bottom_more" href="">查看更多></a>
                       </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('web.layout.footer')
 <script src="{{asset('/js/web/frame/imgUp/js/jquery-1.10.2.js')}}"></script>
    <script src="{{asset('/js/web/frame/imgUp/js/jquery-migrate-1.2.1.min.js')}}"></script>
{{--    <script src="{{asset('/js/web/frame/imgUp/js/imgup.js')}}"></script>--}}
<script>
    $(function(){

      //退货可输入剩余字数计算
      $("#enterLetter").html(200-$(".left_type textarea").val().length);
      $(".left_type textarea").bind("keydown keyup",function () {
          var str=$(this).val().substring(0,200);
          if(parseInt($("#enterLetter").html())<=0){
              $("#enterLetter").html(0);
              $(this).val(str);
          }
          var conlen=$(this).val().length;
          $("#enterLetter").html(200-conlen);
      })
      var num = /^[0-9]+([.]{1}[0-9]+){0,1}$/;//金额只能输入数字或小数
      $(".btn").on('click',function() {
        var reason = $(".back_choise").val();//退款原因
        var money = $(".back_money").val();//退款金额
        var refunds = $(".back_explain").val();//退款说明
//        console.log(reason,money)
        //---------------------退款原因
        if(!reason){
          layer.alert("请选择退货理由!",{icon: 0});
          return false;
        }
        //---------------------退款金额
        if(!money.match(num)){
          $(".back_money").css("border","1px solid red")
          layer.alert("退款金额格式错误！",{icon: 0});
          return false;
        }else{
          $(".back_money").css("border","1px solid green");
          $(".back_money").attr("success","yes")
        }

          $.ajax({
              url:"/member/buyer/change",
              type: "post",
              data: $('#postForm').serialize(),
              dataType:'json',
              success:function(data){
                if(0==data.code){
                    layer.alert('退货\款申请成功,等待卖家处理',{
                        icon: 1
                    }
                    ,function () {
                        location.reload();
                    }
                    );
                }else{
                    layer.alert(data.message,{icon: 0});
                }
              }
            });
      });



        //*******************************************
        //2018年3月29日
        //多图片上传
        //*******************************************

        var IMG_LENGTH = 1;//图片最大1MB
        var IMG_MAXCOUNT = 3;//最多选中图片张数
        var IMG_AJAXPATH = "ajax/ImgUpLoad.ashx";//异步传输服务端位置


        var UP_IMGCOUNT = 0;//上传图片张数记录
        //打开文件选择对话框
        $("#div_imgfile").click(function () {
            if ($(".lookimg").length >= IMG_MAXCOUNT) {
                alert("一次最多上传" + IMG_MAXCOUNT + "张图片");
                return;
            }

            var _CRE_FILE = document.createElement("input");
            if ($(".imgfile").length <= $(".lookimg").length) {//个数不足则新创建对象
                _CRE_FILE.setAttribute("type", "file");
                _CRE_FILE.setAttribute("class", "imgfile");
                _CRE_FILE.setAttribute("accept", ".png,.jpg,.jpeg");
                _CRE_FILE.setAttribute("num", UP_IMGCOUNT);//记录此对象对应的编号
                $("#div_imgfile").after(_CRE_FILE);
            }
            else { //否则获取最后未使用对象
                _CRE_FILE = $(".imgfile").eq(0).get(0);
            }
            return $(_CRE_FILE).click();//打开对象选择框
        });

        //创建预览图，在动态创建的file元素onchange事件中处理
        $(".imgfile").live("change", function () {

            if ($(this).val().length > 0) {//判断是否有选中图片

                //判断图片格式是否正确
                var FORMAT = $(this).val().substr($(this).val().length - 3, 3);
                if (FORMAT != "png" && FORMAT != "jpg" && FORMAT != "peg") {
                    alert("文件格式不正确！！！");
                    return;
                }

                //判断图片是否过大，当前设置1MB
                var file = this.files[0];//获取file文件对象

                if (file.size > (IMG_LENGTH * 1024 * 1024)) {
                    alert("图片大小不能超过" + IMG_LENGTH + "MB");
                    $(this).val("");
                    return;
                }

                //获取图片 上传阿里云 把返回地址放到页面中
                var formFile = new FormData();
                formFile.append("image", file);
                $.ajax({
                    url: "/uploads/images",
                    type: 'post',
                    data: formFile,
                    dataType:"json",
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        $("#tp_ico"+UP_IMGCOUNT).val(data.path);
                    },
                    error: function(data) {
                        console.log("error");
                    }
                });


                //创建预览外层
                var _prevdiv = document.createElement("div");
                _prevdiv.setAttribute("class", "lookimg");
                //创建内层img对象
                var preview = document.createElement("img");
                $(_prevdiv).append(preview);
                //创建删除按钮
                var IMG_DELBTN = document.createElement("div");
                IMG_DELBTN.setAttribute("class", "lookimg_delBtn");
                IMG_DELBTN.innerHTML = "移除";
                $(_prevdiv).append(IMG_DELBTN);
                //创建进度条
                var IMG_PROGRESS = document.createElement("div");
                IMG_PROGRESS.setAttribute("class", "lookimg_progress");
                $(IMG_PROGRESS).append(document.createElement("div"));
                $(_prevdiv).append(IMG_PROGRESS);
                //记录此对象对应编号
                _prevdiv.setAttribute("num", $(this).attr("num"));
                //对象注入界面
                $("#div_imglook").children("div:last").before(_prevdiv);
                UP_IMGCOUNT++;//编号增长防重复

                //预览功能 start
                var reader = new FileReader();//创建读取对象
                reader.onloadend = function () {
                    preview.src = reader.result;//读取加载，将图片编码绑定到元素
                }
                if (file) {//如果对象正确
                    reader.readAsDataURL(file);//获取图片编码
                } else {
                    preview.src = "";//返回空值
                }
                //预览功能 end
            }
        });

        //删除选中图片
        $(".lookimg_delBtn").live("click", function () {
            $(".imgfile[num=" + $(this).parent().attr("num") + "]").remove();//移除图片file
            $(this).parent().remove();//移除图片显示
            var tp_num=$(".lookimg").length+1;
            $("#tp_ico"+tp_num).val("");

        });

        //删除按钮移入移出效果
        $(".lookimg").live("mouseover", function () {
            if ($(this).attr("ISUP") != "1")
                $(this).children(".lookimg_delBtn").eq(0).css("display", "block");;
        });
        $(".lookimg").live("mouseout", function () {
            $(this).children(".lookimg_delBtn").eq(0).css("display", "none");;
        });

        //确定上传按钮
        $("#btn_ImgUpStart").click(function () {

            if ($(".lookimg").length <= 0) {
                alert("还未选择需要上传的图片");
                return;
            }

            //全部图片上传完毕限制
            if ($(".lookimg[ISUP=1]").length == $(".lookimg").length) {
                alert("图片已全部上传完毕！");
                return;
            }

            //循环所有已存在的图片对象，准备上传
            for (var i = 0; i < $(".lookimg").length; i++) {
                var NOWLOOK = $(".lookimg").eq(i);//当前操作的图片预览对象
                NOWLOOK.index = i;
                //如果当前图片已经上传，则不再重复上传
                if (NOWLOOK.attr("ISUP") == "1")
                    continue;

                //上传图片准备
                var IMG_BASE = NOWLOOK.children("img").eq(0).attr("src"); //要上传的图片的base64编码
                var IMG_IND = NOWLOOK.attr("num");
                var IMG_ROUTE = $(".imgfile[num=" + IMG_IND + "]").eq(0).val();//获取上传图片路径，为获取图片类型使用
                var IMG_ENDFOUR = IMG_ROUTE.substr(IMG_ROUTE.length - 4, 4);//截取路径后四位，判断图片类型
                var IMG_FOMATE = "jpeg"; //图片类型***
                if (IMG_ENDFOUR.trim() == ".jpg")
                    IMG_FOMATE = "jpg";
                else if (IMG_ENDFOUR.trim() == ".png")
                    IMG_FOMATE = "png";

                //图片正式开始上传
                $.ajax({
                    type: "POST",
                    url: IMG_AJAXPATH,
                    data: { 'imgBase': IMG_BASE, 'imgFormat': IMG_FOMATE, 'lookIndex': NOWLOOK.index },//图片base64编码，图片格式（当前仅支持jpg,png,jpeg三种），图片对象索引
                    dataType: "json",
                    success: function (data) {
                        if (data.isok == "1") {
                            //图片上传成功回调
                            var UPTIME = Math.ceil(Math.random() * 400) + 400;//生成一个400-800的随机数，假设进图条加载时间不一致
                            $(".lookimg").eq([data.ind]).attr("ISUP", "1");//记录此图片已经上传
                            $(".lookimg").eq([data.ind]).children(".lookimg_progress").eq(0).children("div").eq(0).animate({ width: "100%" }, UPTIME, function () {
                                $(this).css("background-color", "#00FF00").text('上传成功');
                            });
                        }
                        else {//图片未上传成功回调
                            $(".lookimg")[data.ind].children(".lookimg_progress").eq(0).children("div").eq(0).css("width", "100%").css("background-color", "red").text("上传失败");
                        }
                    },
                    error: function (err) {
                        //服务器连接失败报错处理
                        alert("error");
                        //alert(err.responseText);
                    },
                    beforeSend: function () {
                        //图片上传之前执行的操作，当前为进度条显示
                        NOWLOOK.children(".lookimg_progress").eq(0).css("display", "block");//进度条显示
                    }
                });
            }
        });

    });

</script>
</body>
</html>